<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>房屋管理</a>
    <a><cite>未收账单</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <form class="layui-form layui-col-space5" lay-filter="formData">
          <div class="layui-inline layui-show-xs-block">
            <select name="property">
              {foreach $properties as $v}
              <option value="{$v.id}" {if $house_property_id==$v.id}selected{/if}>{$v.name}</option>
              {/foreach}
            </select>
          </div>
          <div class="layui-inline layui-show-xs-block">
            <input class="layui-input" autocomplete="off" placeholder="抄表日期" name="meter_reading_time"
              id="meter_reading_time">
          </div>
          <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
          </div>
        </form>
        <table class="layui-table" id="dataGrid" lay-filter="grid"></table>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="checkboxDemo">
  <input type="text" style="padding: 3px 0px; text-align:center; width: 12px; height: 12px;">
</script>
<script type="text/html" id="barDemo">
  {{#  if(d.end_time == null && d.meter_reading_time == ''){ }}
  <a class="layui-btn layui-btn-xs" lay-event="editNew"><i class="layui-icon">&#xe642;</i>修改</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="account"><i class="layui-icon">&#xe605;</i>到账</a>
  {{#  } else { }}
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>抄表</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="printData"><i class="layui-icon">&#xe629;</i>收据</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="account"><i class="layui-icon">&#xe605;</i>到账</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="history"><i class="layui-icon">&#xe68d;</i>历史账单</a>
  <a class="layui-btn layui-btn-xs" lay-event="balance">借贷</a>
  {{#  } }}
</script>
<script type="text/html" id="toolbarDemo">
  <div class = "layui-btn-container" > s
      <button class = "layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon"></i>新增</button>
      <button class = "layui-btn layui-btn-sm" lay-event="electric">
        集中抄电</button>
      <button class = "layui-btn layui-btn-sm" lay-event="water">
        集中抄水</button>
  </div > 
</script>

<script>
  layui.use(['table', 'form', 'laydate'], function () {
    var table = layui.table
      , laydate = layui.laydate
      , form = layui.form;

    //执行一个laydate实例
    laydate.render({
      elem: '#meter_reading_time' //指定元素
    });

    // 首次加载
    table.render({
      elem: '#dataGrid'
      , height: 'full'
      , url: './query.html' //数据接口
      , toolbar: '#toolbarDemo'
      , defaultToolbar: ['filter',
        { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
          title: '打印'
          , layEvent: 'LAYTABLE_TIPS'
          , icon: 'layui-icon-print'
        }]
      , page: true //开启分页
      , autoSort: false
      , cols: [[ //表头
        { field: 'check', toolbar: '#checkboxDemo', align: 'center', minWidth: 50, width: 50, hide: true }
        , { field: 'property_name', title: '房产' }
        , { field: 'name', title: '房号', sort: true,  }
        , { field: 'total_money', title: '金额' }
        , { field: 'check', toolbar: '#checkboxDemo', align: 'center', minWidth: 50, width: 50, hide: true }
        , { field: 'start_time', title: '收款日期', minWidth: 100 }
        , { field: 'meter_reading_time', title: '抄表日期', minWidth: 100 }
        , { field: '', title: '操作', toolbar: '#barDemo', minWidth: 394 }
      ]]
    });

    table.on('sort(grid)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      table.reload('dataGrid', {
        initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
        , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
          field: obj.field //排序字段
          , order: obj.type //排序方式
        }
      });
    });

    //表头工具栏事件
    table.on('toolbar(grid)', function (obj) {
      var formData = form.val("formData");
      switch (obj.event) {
        case 'add':
          if (formData.property) {
            xadmin.open('新增账单', 'bill.html?house_property_id=' + formData.property, '', '', true);
          }
          break;
        case 'electric':
          if (formData.property) {
            xadmin.open('集中抄电', 'centralized.html?house_property_id=' + formData.property + '&type=e', '', '', true);
          }
          break;
        case 'water':
          if (formData.property) {
            xadmin.open('集中抄水', 'centralized.html?house_property_id=' + formData.property + '&type=w', '', '', true);
          }
          break;
        //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          print('dataGrid');
          break;
      };
    });

    // 编辑、删除事件
    //监听行工具条
    table.on('tool(grid)', function (obj) {
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      switch (layEvent) {
        case 'edit':// 抄表
          xadmin.open('编辑账单', 'edit.html?id=' + data.id, '', '', true);
          break;
        case 'editNew':// 抄表
          xadmin.open('编辑账单', 'bill.html?id=' + data.id + '&house_property_id=' + data.house_property_id, '', '', true);
          break;
        case 'printData':// 打印
          xadmin.open('收据', 'print.html?id=' + data.id + '&number_id=' + data.house_number_id, '', '', true);
          break;
        case 'history'://历史账单
          xadmin.open('历史账单',
            'history.html?number_id=' + data.house_number_id
            + '&property_id=' + data.house_property_id
            + '&tenant_id=' + data.tenant_id, '', '', true);
          break;
        case 'account': //到账
          layer.confirm(data.name + '的' + data.total_money + '元已到账？', {
            btn: ['确定'] //按钮
          }, function () {
            main.ajaxPost(
              {
                url: "{:url('account')}",
                data: { "id": data.id },
              },
              function (data) {
                table.reload('dataGrid'); //只重载数据
              }
            );
          });
          break;
        case 'balance':
          layer.confirm('是否借贷', {
            btn: ['确定'] //按钮
          }, function () {
            main.ajaxPost(
              {
                url: "{:url('balance')}",
                data: { "id": data.id },
              },
              function (data) {
                table.reload('dataGrid'); //只重载数据
              }
            );
          });
          break;s
      };
    });

    form.on('submit(sreach)', function (data) {
      var data = data.field;
      table.reload('dataGrid', {
        url: './query.html'
        , where: {
          "house_property_id": data.property,
          "meter_reading_time": data.meter_reading_time
        }
        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
          curr: 1 //设定初始在第 5 页
        }
      }); //只重载数据
      return false;
    });
  });

  function print(tablelayid) {
    var v = document.createElement("div");
    var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 12px; padding: 9px 15px; border: 1px solid #ccc; text-align: center; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>"].join("");
    $(v).append($(".layui-table-box").find(".layui-table-header").html());
    $(v).find("tr").after($("[lay-id=\"" + tablelayid + "\"] .layui-table-body.layui-table-main table").html()); $(v).find("th.layui-table-patch").remove();
    $(v).find(".layui-table-col-special").remove();
    var h = window.open("打印窗口", "_blank");
    h.document.write(f + $(v).prop("outerHTML"));
    h.document.close();
    h.print();
    h.close();
  }
</script>